<template>
  <transition name="fade">
    <div class="tm-dialog-container" :style="style" v-show="visible">
      <div class="tm-dialog-header">
        <div class="tm-dialog-title">
          <slot name="title"><i v-if="icon" :class="icon"></i>{{ title }}</slot>
        </div>
        <div class="tm-dialog-op">
          <button class="tm-button primary" v-show="showMin" @click.stop="handleHide">
            <i class="el-icon-minus"></i>
          </button>
          <button class="tm-button primary" v-show="showMax" @click.stop="handleMaxSize">
            <i :class="isMaxSize ? 'el-icon-copy-document' : 'el-icon-full-screen'"></i>
          </button>
          <button class="tm-button" @click.stop="cancel('close')">
            <i class="el-icon-close"></i>
          </button>
        </div>
      </div>
      <div class="tm-dialog-body">
        <slot />
      </div>
      <div class="tm-dialog-footer" v-if="showFooter">
        <slot name="footer">
          <button class="tm-button" @click="cancel('cancel')">{{ cancelText || '取消' }}</button>
          <button class="tm-button" @click="confirm">{{ confirmText || '确认' }}</button>
        </slot>
      </div>
      <div class="tm-dialog-resize">
        <div class="resize-el resize-top-left"></div>
        <div class="resize-el resize-top-right"></div>
        <div class="resize-el resize-bottom-right"></div>
        <div class="resize-el resize-bottom-left"></div>
      </div>
    </div>
  </transition>
</template>

<script>
import Dragger from '../utils/dragger.js'
import isString from '../utils/isString'
let zIndex = 9999
let idSeed = 10000

export default {
  name: 'TmDialog',
  props: {
    icon: {
      type: String,
      default: () => 'el-icon-s-opportunity'
    },
    title: String,
    visible: {
      type: Boolean,
      default: () => false
    },
    showFooter: Boolean,
    showMin: Boolean,
    showMax: Boolean,
    confirmText: String,
    cancelText: String,
    width: {
      type: [Number, String],
      default: () => 400
    },
    height: {
      type: [Number, String],
      default: () => 200
    }
  },
  data () {
    let id = 'tmd' + idSeed++
    return {
      id,
      size: {
        width: 400,
        height: 200
      },
      position: {
        top: 50,
        left: 40
      },
      zIndex: (zIndex += 1),
      isMaxSize: false
    }
  },
  computed: {
    style () {
      const s = { ...this.size, ...this.position }
      for (let key in s) {
        s[key] = s[key] + 'px'
      }
      s.zIndex = this.zIndex
      return s
    }
  },
  methods: {
    cancel (action) {
      this.$emit('cancel', action)
    },
    confirm () {
      this.$emit('confirm')
    },
    init () {
      let screenWidth = $(window).width()
      let screenHeight = $(window).height()
      this.size.width = this.calc(this.width, screenWidth)
      this.size.height = this.calc(this.height, screenHeight)
      this.position.top = screenHeight / 2 - this.size.height / 2
      this.position.left = screenWidth / 2 - this.size.width / 2
    },
    calc (val, base) {
      if (isString(val) && val.endsWith('%')) {
        let percent = parseFloat(val) / 100
        return base * percent
      }
      return parseFloat(val)
    },
    handleHide () {
      this.$emit('update:visible', false)
    },
    toggle () {
      this.$emit('update:visible', !this.visible)
    },
    handleMaxSize () {
      let el = $(this.$el)
      if (!this.isMaxSize) {
        this.stylesBeforeMax = {
          width: el.width(),
          height: el.height(),
          left: parseInt(el.css('left')),
          top: parseInt(el.css('top'))
        }
        this.size.width = $(window).width() - 40
        this.size.height = $(window).height()
        this.position.top = 0
        this.position.left = 40
      } else {
        this.size.width = this.stylesBeforeMax.width
        this.size.height = this.stylesBeforeMax.height
        this.position.top = this.stylesBeforeMax.top
        this.position.left = this.stylesBeforeMax.left
      }

      this.isMaxSize = !this.isMaxSize
    }
  },
  mounted () {
    this.init()
    this.dragger = new Dragger(this.$el, '.tm-dialog-title,.tm-dialog-header', this.id)
    this.dragger.on('active_' + this.id, () => {
      zIndex += 1
      this.zIndex = zIndex
    })
    this.dragger.on('move_' + this.id, ({ move, start }) => {
      let top = start.top + move.top
      let left = start.left + move.left
      $(this.$el).css({
        top: top > 0 ? top : 0,
        left: left > 0 ? left : 0
      })
    })
    const resize1 = new Dragger(
      $(this.$el).find('.resize-top-left'),
      null,
      'resize-top-left' + this.id
    )
    const resize2 = new Dragger(
      $(this.$el).find('.resize-top-right'),
      null,
      'resize-top-right' + this.id
    )
    const resize3 = new Dragger(
      $(this.$el).find('.resize-bottom-right'),
      null,
      'resize-bottom-right' + this.id
    )
    const resize4 = new Dragger(
      $(this.$el).find('.resize-bottom-left'),
      null,
      'resize-bottom-left' + this.id
    )
    let start_size = {}
    resize1.on('move_' + 'resize-top-left' + this.id, ({ move, start }) => {
      let top = start.top + move.top
      let left = start.left + move.left
      $(this.$el).css({
        top: top > 0 ? top : 0,
        left: left > 0 ? left : 0,
        width: start_size.width - move.left,
        height: start_size.height - move.top
      })
    })
    resize2.on('move_' + 'resize-top-right' + this.id, ({ move, start }) => {
      let top = start.top + move.top
      $(this.$el).css({
        top: top > 0 ? top : 0,
        width: start_size.width + move.left,
        height: start_size.height - move.top
      })
    })
    resize3.on('move_' + 'resize-bottom-right' + this.id, ({ move, start }) => {
      $(this.$el).css({
        width: start_size.width + move.left,
        height: start_size.height + move.top
      })
    })
    resize4.on('move_' + 'resize-bottom-left' + this.id, ({ move, start }) => {
      let left = start.left + move.left
      $(this.$el).css({
        left: left > 0 ? left : 0,
        width: start_size.width - move.left,
        height: start_size.height + move.top
      })
    })
    resize1.on('active_' + 'resize-top-left' + this.id, () => {
      start_size = {
        width: $(this.$el).width(),
        height: $(this.$el).height()
      }
    })
    resize2.on('active_' + 'resize-top-right' + this.id, () => {
      start_size = {
        width: $(this.$el).width(),
        height: $(this.$el).height()
      }
    })
    resize3.on('active_' + 'resize-bottom-right' + this.id, () => {
      start_size = {
        width: $(this.$el).width(),
        height: $(this.$el).height()
      }
    })
    resize4.on('active_' + 'resize-bottom-left' + this.id, () => {
      start_size = {
        width: $(this.$el).width(),
        height: $(this.$el).height()
      }
    })
  },
  beforeDestroy () {
    this.dragger.removeDragger()
  }
}
</script>
